<template>
  <!-- 标签Strat -->
  <div>
    <div id="printContent">
      <div class="title">
        <div class="logo">
          <img
            src="../../src/assets/img/logo2.jpg"
            alt=""
            style="height: 2.25rem; width: 8.25rem"
          />
        </div>
        <div class="name">固定资产标识牌</div>
      </div>
      <div class="info-one">
        <div class="one-left">
          <div class="one-flex">
            <span class="bod-box left-name">设备名称:</span>
            <span class="bod-box left-name" style="flex: 1">{{
              assetsInfo.assetsName || "暂未填写"
            }}</span>
          </div>
          <div class="one-flex">
            <span class="bod-box left-name">设备型号:</span>
            <span class="bod-box left-name" style="flex: 1">{{
              assetsInfo.equipmentmodel || "暂未填写"
            }}</span>
          </div>
          <div class="one-flex">
            <span class="bod-box left-name">制造厂家:</span>
            <span class="bod-box left-name" style="flex: 1">{{
              assetsInfo.equipmentmanufacturer || "暂未填写"
            }}</span>
          </div>
        </div>
        <div
          class="one-right bod-box"
          style="display: flex; align-items: center"
        >
          <canvas ref="photoQrcode" />
        </div>
      </div>
      <div class="info-two">
        <div class="two-left">
          <div class="lef-box">
            <span class="right-name bod-box">设备编号:</span>
            <span class="right-name bod-box" style="flex: 1">{{
              assetsInfo.additionalequipmentNo || "暂未填写"
            }}</span>
          </div>
          <div class="lef-box">
            <span class="right-name bod-box">出厂日期:</span>
            <span class="right-name bod-box" style="flex: 1">{{
              assetsInfo.purchaseDt || "暂未填写"
            }}</span>
          </div>
        </div>

        <div class="two-right">
          <div class="lef-box">
            <span class="right-name bod-box">资产条码:</span>
            <span class="right-name bod-box" style="flex: 1">{{
              assetsInfo.assetsBarcode || "暂未填写"
            }}</span>
          </div>
          <div class="lef-box">
            <span class="right-name bod-box">使用部门:</span>
            <span class="right-name bod-box" style="flex: 1">{{
              assetsInfo.departmentName || "暂未填写"
            }}</span>
          </div>
        </div>
      </div>
      <div class="corporation-name">广东芭薇生物科技股份有限公司</div>
    </div>
    <div class="btnClick">
      <div class="btn" @click="htmlCanvas()">打印</div>
    </div>
  </div>
  <!-- 标签End -->
</template>

<script>
import QrCode from "qrcode";
import JsBarcode from "jsbarcode";
import print from "print-js";
import html2canvas from "html2canvas";
export default {
  props: ["Info"],
  components: {
    QrCode,
  },
  data() {
    return {
      assetsInfo: {
        assetsName: null, //二维码名称
        assetsNo: null, //二维码编码
      },
    };
  },
  methods: {
    //二维码
    qrCode(url) {
      //展示弹层
      this.showQrcode = true;
      if (url) {
        let options = {
          text: url,
          displayValue: true,
          fontSize: 12,
          width: "15.625rem",
          height: "15.625rem",
        };
        //弹层为true时，视图还没有更新，所以拿不到ref，因为视图更新是异步的
        this.$nextTick(() => {
          QrCode.toCanvas(this.$refs.photoQrcode, url, options); // 将地址转化成二维码
          // 如果转化的二维码后面信息 是一个地址的话 就会跳转到该地址 如果不是地址就会显示内容
        });
      } else {
        this.$message.warning("还没有上传图片");
      }
    },
    //QCR的style配置
    getBarcode(url) {
      let options = {
        text: url,
        displayValue: true,
        fontSize: 12,
        height: "40.5rem",
        width: 1.5,
      };
      this.$nextTick(() => {
        //这个根据自己的代码 论情况写
        JsBarcode("#barcode", url, options);
        //#barcode 对应容器中的id
        //987654321 是条形码的携带的信息，和option中的text显示信息要区分
        //options:是条形码的配置信息
      });
    },
    //打印函数
    PrintRow(url) {
      printJS({
        printable: url, // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
        type: "image", // 可打印的类型。可用的打印选项包括：pdf，html，图像，json和raw-html。
        targetStyles: ["*"], // 库在打印HTML元素时处理任何样式
      });
    },
    //导出生产图片
    htmlCanvas() {
      let that = this;
      // 获取要导出的DOM
      const rect = document
        .querySelector("#printContent")
        .getBoundingClientRect();
      html2canvas(document.querySelector("#printContent"), {
        width: rect.width,
        height: rect.height,
      }).then(function (canvas) {
        const pageData = canvas.toDataURL("image/jpeg", 1.0);
        const imgData = pageData.replace("image/jpeg", "image/octet-stream");
        const imgName = "生成图片.jpg";
        const save_link = document.createElementNS(
          "http://www.w3.org/1999/xhtml",
          "a"
        );
        that.PrintRow(imgData);
        return;
        save_link.href = imgData;

        save_link.download = imgName;
        const event = document.createEvent("MouseEvents");
        event.initMouseEvent(
          "click",
          true,
          false,
          window,
          0,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          null
        );
        save_link.dispatchEvent(event);
      });
    },
  },
  created() {
    this.assetsInfo = JSON.parse(this.Info);
    this.assetsInfo.purchaseDt = this.utcTime.utctobeijing(
      this.assetsInfo.purchaseDt
    );
    if (this.assetsInfo.assetsAttributesList) {
      this.assetsInfo.assetsAttributesList.map((item, index) => {
        if (item.attributesName == "公司固定资产编号") {
          this.assetsInfo.additionalassetcode = item.assetsAttributesData;
        }
        if (item.attributesName == "设备编号") {
          this.assetsInfo.additionalequipmentNo = item.assetsAttributesData;
        }
        if (item.attributesName == "设备制造厂商") {
          this.assetsInfo.equipmentmanufacturer = item.assetsAttributesData;
        }
        if (item.attributesName == "设备型号") {
          this.assetsInfo.equipmentmodel = item.assetsAttributesData;
        }
      });
    }
    console.log(this.assetsInfo);
  },
  mounted() {
    // let obj =JSON.parse(this.Info)
    this.qrCode(this.assetsInfo.assetsBarcode);
    this.getBarcode(this.assetsInfo.assetsBarcode);
  },
};
</script>

<style lang="less" scoped>
#printContent {
  border: 1px solid black;
  height: 100%;
}
.label-box {
  padding: 1.25rem;
  height: 31.25rem;
  width: 100%;
  .title {
    display: flex;
    border-bottom: 1px solid #c0c0c0;
    padding: 0.625rem;
    .name {
      align-self: center;
      margin: 0 auto;
    }
  }
  .info-one {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.625rem;
    .bod-box {
      border: 1px solid #c0c0c0;
    }
    .one-flex {
      display: flex;
    }
    .one-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      .left-name {
        padding: 0.625rem;
        white-space: normal;
        display: inline-block;
      }
    }
    .one-right {
      margin-bottom: 0;
    }
  }

  .info-two {
    display: flex;
    justify-content: space-between;
    .bod-box {
      border: 1px solid #c0c0c0;
    }

    .two-left {
      flex: 1;
      .lef-box {
        display: flex;
        .right-name {
          padding: 0.625rem;
          white-space: normal;
          display: inline-block;
        }
      }
    }
    .two-right {
      flex: 1;
      .lef-box {
        display: flex;
        .right-name {
          padding: 0.625rem;
          white-space: normal;
          display: inline-block;
        }
      }
    }
  }
  .btnClick {
    
    margin-top: 1.25rem;
    // cursor: pointer;
    display: flex;
    justify-content: flex-end;
    .btn {
      cursor: pointer;
      padding: 0.3125rem 0.625rem;
      box-sizing: border-box;
      border: 1px solid #000;
      border-radius: 0.3125rem;
    }
  }
  .corporation-name {
    text-align: center;
    padding: 0.625rem 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.3125rem;
  }
}
</style>
